<template>
	<view>
		<view class="airline">
			<view class="scroll-box">
				<view class="line-kind">
					<view class="line-item" @click="lineActive=item.id" :class="lineActive===item.id?'active':''"
						v-for="item in lineKindList" :key="item.id">
						<image class="item-icon" v-if="item.icon" :src="item.icon" mode=""></image>{{item.lable}}
					</view>
				</view>
			</view>

			<view class="search">
				<u-search bgColor="white" v-model="keyword" shape="round" placeholder="搜索航线" height="37"
					:showAction="false"></u-search>
			</view>
			<view class="airline-list">
				<view class="airline-item" v-for="item in filterList" :key="item.ID">
					<view class="item-top">
						<view class="item-message">
							<text>{{item.name}}</text>

							<text class="item-button" @click="toggleTask(item.ID)"
								:class="item.check?'active':''">{{item.check?"执行中":"执行任务"}}</text>
						</view>
						<view class="item-record">
							<text class="date" v-if="item.UpdatedAt!==0">{{item.UpdatedAt}}</text>
							<text style="margin-left:20rpx;" v-if="item.UpdatedAt!==0">更新</text>
						</view>
					</view>
					<view class="item-bottom">
						<view class="item-icon">
							<image :src="lineKindList[item.type+1].icon" mode=""></image>
						</view>
						<view class="item-type">
							<text class="content">{{lineKindList[item.type+1].lable}}</text>
							<text class="title">类型</text>
						</view>
						<view class="item-type">
							<text class="content">{{item.execDistance}}</text>
							<text class="title">距离/km</text>
						</view>
						<view class="item-type">
							<text class="content">{{item.execTimeSpend}}</text>
							<text class="title">时间/min</text>
						</view>
						<view class="item-type">
							<text class="content">{{item.RecordCount}}</text>
							<text class="title">执行/次</text>
						</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		getQryUavAirlineList
	} from "../../api/index.js"
	import {
		mapState
	} from "vuex"
	import {
		filterDate
	} from "../../utils/filterDate.js"
	import websocket from "../../websocket/commands.js"
	export default {
		data() {
			return {
				keyword: '',
				lineActive: -1,
				lineKindList: [{
						lable: '全部',
						id: -1,

					}, {
						icon: '../../static/svg/airline.svg',
						lable: '航线',
						id: 0,

					},
					{
						icon: '../../static/svg/full-view.svg',
						lable: '全景',
						id: 1,

					}, {
						icon: '../../static/svg/orthographic.svg',
						lable: '正射',
						id: 2,

					}, {
						icon: '../../static/svg/threeDimensional.svg',
						lable: '三维',
						id: 3,

					}
				],
				airlineList: [],
				filterList: [],
				missionId: ""
			};
		},
		onShow() {
			getQryUavAirlineList().then(res => {
				const {
					data: {
						data
					}
				} = res
				data.list = data.list.filter(item => item.nestId === this.mechineEvent.nestId)
				this.airlineList = JSON.parse(JSON.stringify(data.list))
				this.airlineList.map(item => {
					item.UpdatedAt = item.UpdatedAt ? filterDate(item.UpdatedAt) : 0
					Object.assign(item, {
						check: false
					})
				})
				this.filterList = this.setFilterList()
			})
		},
		watch: {
			keyword() {
				this.filterList = this.setFilterList()
			},
			lineActive() {
				this.filterList = this.setFilterList()
			},

		},
		computed: {
			...mapState('nest', ["mqttData"]),
			...mapState(["mechineEvent"]),
			updateData() {
				let id = this.mechineEvent.nestId ? this.mechineEvent.nestId : '02d576bd-b12e-4a77-9f4e-c536dc6dde28'
				let data = this.$store.state.nest.mqttData[id]
				this.missionId = data?.currentMissionID || ""
				// console.log(this.missionId, 'this.missionId')
				this.airlineList.forEach(ele => {
					if (ele.missionid === this.missionId) {
						ele.check = true
					} else {
						ele.check = false
					}
				})
				this.filterList = this.setFilterList()
			},
		},
		methods: {
			setFilterList() {
				let arr = JSON.parse(JSON.stringify(this.airlineList))
				if (this.lineActive !== -1) {
					arr = arr.filter((item) => {
						return item.type === this.lineActive
					})
				}
				arr = arr.filter((item) => {
					return item.name.includes(this.keyword)
				})
				return arr
			},
			toggleTask(index) {

				let i = this.airlineList.findIndex((item) => {
					return item.ID === index
				})
				let {
					check,
					name,
					missionid
				} = this.airlineList[i]

				uni.showModal({
					title: `确定执行:${name}任务吗`,
					success: (res) => {
						if (res.confirm) {
							// 确认 

							if (!check) {
								websocket.selectMissionAndStart(this.mechineEvent.nestId, missionid)
								// websocket.stopDownloadingData(this.mechineEvent.nestId);
							} else {
								websocket.stopMission(this.mechineEvent.nestId)
							}

						} else {
							// 取消
						}
					}
				})
			}
		}


	}
</script>

<style lang="scss">
	.airline {
		margin: 0 40rpx;
		padding-bottom: 40rpx;

		.scroll-box {
			width: 100%;
			overflow-x: scroll;
		}

		.line-kind {
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
			width: 800rpx;

			.line-item {
				background-color: $color-blue;
				text-align: center;
				width: 140rpx;
				height: 60rpx;
				border-radius: 26rpx;
				color: white;
				line-height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-evenly;

				.item-icon {
					height: 40rpx;
					width: 40rpx;
				}

				&.active {
					background-color: $color-green;
				}
			}
		}

		.search {
			margin-top: 20rpx;
			border: 1rpx solid $color-gray;
		}

		.airline-list {
			width: 100%;
			margin-top: 30rpx;

			.airline-item {
				height: 240rpx;
				box-shadow: 0px 3px 8px 0px #00000040;
				padding: 0 20rpx;
				margin-top: 30rpx;
				border-radius: 10rpx;

				.item-top {
					height: 50%;
					padding: 17rpx 0;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					border-bottom: 1px solid $color-gray;
				}

				.item-bottom {
					height: 50%;
					padding: 20rpx 0;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item-type {
						display: flex;
						flex-direction: column;
						align-items: center;
						height: 100%;
						justify-content: space-between;

						>.title {
							font-size: 24rpx;
							color: $color-gray;
						}
					}

					>.item-icon {
						transform: translateX(10rpx);
						height: 80rpx;
						width: 80rpx;

						>image {
							height: 100%;
							width: 100%;
						}
					}
				}

				.item-record {
					color: $color-gray;
					font-size: 24rpx;
				}

				.item-message {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.item-button {
						padding: 8rpx 16rpx;
						background-color: $color-blue;
						color: white;
						border-radius: 100rpx;
						font-size: 30rpx;

						&.active {
							background-color: $color-green;
						}
					}
				}
			}
		}
	}
</style>